import { React, useEffect, useState } from 'react';
import { Space, Button, Toast, List, Tag, NavBar, Avatar, Card, Steps } from 'antd-mobile'
import {
  FireFill, CheckCircleFill,
  ClockCircleFill,
  HandPayCircleOutline, RightOutline
} from 'antd-mobile-icons'

import './preview.css'
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom'
import { Audio } from '@nutui/nutui-react'
import axios from 'axios'
import ChildComponent from './childComponent'
const { Step } = Steps


function Overview() {
  const [basicFact, setBasicFact] = useState([])
  const navigate = useNavigate();

  useEffect(() => {
    const basicFact = JSON.parse(localStorage.getItem('basicFact'));
    if (basicFact) {
      setBasicFact(basicFact)
      console.log(basicFact);
    }
  }, []);

  
 

  const back = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    });
    navigate('/overview');
  };

  

  return (
    <>
      <div className='top'>
        <NavBar onBack={back}>
          简历预览
        </NavBar>
      </div>

      <div>
        <div className='head'>
          <div className='img1'>
            <Avatar size="large" style={{ '--size': '100px',borderRadius:'50%' }} src={basicFact.head} />
            {basicFact.name}
          </div>
          <div style={{paddingTop:'10px'}}>
            {basicFact.introduction}
          </div>
        </div>
        <div style={{height:'100%',padding:'10px',backgroundColor:"#f5f5f6"}}>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                基本信息
              </div>
            }
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
          >
            <div>
              <div style={{ width: '50%' }}>
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    姓名：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.name}
                  </div>
                </div>
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    性别：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.sex}
                  </div>
                </div>
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    电话：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.phone}
                  </div>
                </div>
                
              </div>
              <div style={{ width: '50%' }}>
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    生日：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.birthday}
                  </div>
                </div>
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    学历：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.education}
                  </div>
                </div>
                
                <div style={{ display: 'flex' }}>
                  <div style={{ width: '50%' }}>
                    状态：
                  </div>
                  <div style={{ width: '50%' }}>
                    {basicFact.status}
                  </div>
                </div>
              </div>

            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                我有话对hr说
              </div>
            }
            
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
          >
            <div style={{ textAlign: 'center' }}>
              <Audio
                autoPlay={false}
                src={basicFact.url}
                type="controls"
                preload="auto"
                muted={false}
                onPause={(e) => {
                  console.log('paused', e)
                }}
                onEnd={() => alert('ended!')}
              />
            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                工作经历
                <Tag round color='orange' fill='outline'>
                  必填
                </Tag>
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/WorkExp') }}
          >
            <div>
              {basicFact.introduction ?
                (
                  <div>
                    <Steps
                      direction='vertical'
                      current={1}
                      style={{
                        '--title-font-size': '17px',
                        '--description-font-size': '15px',
                        '--indicator-margin-right': '12px',
                        '--icon-size': '22px',
                      }}
                    >
                      <Step
                        title={
                          <Space block direction='vertical'>
                            <div>
                              {dayjs(basicFact.work.work_start).format('YYYY-MM-DD')}

                              至
                              {dayjs(basicFact.work.work_end).format('YYYY-MM-DD')}

                            </div>
                            <div>{basicFact.work.work_name}</div>
                          </Space>
                        }
                        description={
                          <Space block direction='vertical'>
                            <div>{basicFact.work.work_cate}</div>
                            <div>{basicFact.work.work_content}</div>
                          </Space>
                        }
                        icon={<CheckCircleFill />}
                      />
                      <Step />
                    </Steps>
                  </div>
                ) :
                <ChildComponent>增加工作经历</ChildComponent>
              }
            </div>
          </Card>
          {/* 学习经历 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
                <Tag round color='orange' fill='outline'>
                  必填
                </Tag>
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/studyExp') }}
          >
            <div>
              {basicFact.study ?
                (
                  <div>
                    <Steps
                      direction='vertical'
                      current={1}
                      style={{
                        '--title-font-size': '17px',
                        '--description-font-size': '15px',
                        '--indicator-margin-right': '12px',
                        '--icon-size': '22px',
                      }}
                    >
                      <Step
                        title={
                          <Space block direction='vertical'>
                            <div>
                              毕业时间：
                              {dayjs(basicFact.study.study_end).format('YYYY-MM-DD')}

                            </div>
                            <div>{basicFact.study.study_name}</div>
                          </Space>
                        }
                        description={
                          <Space block direction='vertical'>
                            <div>{basicFact.study.study_content}</div>
                          </Space>
                        }
                        icon={<CheckCircleFill />}
                      />
                      <Step />
                    </Steps>
                  </div>
                ) :
                <ChildComponent>增加学习经历</ChildComponent>
              }
            </div>
          </Card>
        </div>
        
      </div>
    </>
  );
}

export default Overview;